<template>
  <div class="discovery-container">
    <!-- 轮播图 -->
    <el-carousel class="" :interval="4000" type="card">
      <el-carousel-item v-for="(banner,index) in bannerList" :key="index">
        <img :src="banner.imageUrl" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 推荐歌单 -->
    <div class="recommend">
      <h3 class="title">
        推荐歌单
      </h3>
      <div class="items">
        <div class="item" v-for="(song,index) in RecommendSongList" :key="index">
          <div class="img-wrap">
            <div class="desc-wrap">
              <span class="desc">{{song.name}}</span>
            </div>
            <img :src="song.picUrl" alt="" />
            <span class="iconfont icon-play" @click="playSong(song.id)"></span>
          </div>
          <p class="name">{{song.name}}</p>
        </div>
      </div>
    </div>
    <!-- 最新音乐 -->
    <div class="news">
      <h3 class="title">
        最新音乐
      </h3>
      <div class="items">
        <div class="item" v-for="(song,index) in newSongList" :key="index">
          <div class="img-wrap">
            <img :src="song.picUrl" alt="" />
            <span class="iconfont icon-play" @click="playSong(song.id)"></span>
          </div>
          <div class="song-wrap">
            <div class="song-name">{{song.name}}</div>
            <div class="singer">{{song.song.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="mvs">
      <h3 class="title">推荐MV</h3>
      <div class="items">
        <div class="item" v-for="(mv,index) in RecommendMVList" :key="index">
          <div class="img-wrap">
            <img :src="mv.picUrl" alt="" />
            <span class="iconfont icon-play" @click="playSong(mv.id)"></span>
            <div class="num-wrap">
              <div class="iconfont icon-play"></div>
              <div class="num">{{mv.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{mv.name}}</div>
            <div class="singer">{{mv.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这是test分支中的代码
import { request } from "../utils/index.js";
export default {
  name: 'discovery',
  data() {
    return {
      //定义一个轮播图列表
      bannerList: [],
      //推荐歌单
      RecommendSongList: [],
      //最新音乐
      newSongList: [],
      //推荐MV
      RecommendMVList: [],
    }
  },
  methods: {
    async getBannerList() {
      let result = await request({
        url: '/banner',
        method: 'get'
      })
      this.bannerList = result.banners;
    },
    async getRecommendList() {
      let result = await request({
        url: '/personalized',
        method: 'get',
        params:{
          limit: 10
        }
      })
      this.RecommendSongList = result.result;
    },
    async getNewSongList() {
      let result = await request({
        url: '/personalized/newsong',
        method: 'get'
      })
      this.newSongList = result.result;
    },
    async getNewMvs() {
      let result = await request({
        url: '/personalized/mv',
        method: 'get'
      })
      this.RecommendMVList = result.result;
      console.log(result);
    },
    //播放歌曲
    async playSong(id){
      let result = await request({
        url: '/song/url',
        method: 'get',
        params:{
          id
        }
      })
      console.log(result);
      let url = result.data[0].url;
      this.$parent.musicUrl = url;
    }
  },
  //窗体加载事件
  created () {
    //获取轮播图
    this.getBannerList();

    //获取推荐歌单
    this.getRecommendList();

    //获取最新音乐
    this.getNewSongList();

    //获取最新MV
    this.getNewMvs();
  },
};
</script>

<style >

</style>
